<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #121212;
    }
    .container{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .circle{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: aliceblue;
      position: absolute;
      /* 加速后减速 */
      animation: pulse 3s ease-in-out infinite;
    }
    /* 设置不同圆的宽高、透明、延迟动画时间 */
    .circle:nth-child(1){
      width: calc(50px * 1);
      height: calc(50px * 1);
      opacity: 1;
      animation-delay: 0.12s;
    }
    .circle:nth-child(2){
      width: calc(50px * 2);
      height: calc(50px * 2);
      opacity: 0.5;
      animation-delay: 0.24s;
    }.circle:nth-child(3){
      width: calc(50px * 3);
      height: calc(50px * 3);
      opacity: 0.34;
      animation-delay: 0.36s;
    }
    .circle:nth-child(4){
      width: calc(50px * 4);
      height: calc(50px * 4);
      opacity: 0.26;
      animation-delay: 0.48s;
    }
    .circle:nth-child(5){
      width: calc(50px * 5);
      height: calc(50px * 5);
      opacity: 0.16;
      animation-delay: 0.60s;
    }
    .circle:nth-child(6){
      width: calc(50px * 6);
      height: calc(50px * 6);
      opacity: 0.10;
      animation-delay: 0.72s;
    }
    @keyframes pulse {
      0%{
        transform: scale(1);
      }
      25%{
        transform: scale(1.3);
      }
      50%{
        transform: scale(0.7);
      }
      75%{
        transform: scale(1);
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</body>
</html>